<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<pre>
			1. 三个指令：
			v-text：填充纯文本
			v-html：填充纯文本、HTML片段（能够解析html片段）
							因为会对代码解析，所以存在安全问题
							只推荐在可信赖网站内部使用
			v-pre： 展示原数据，跳过编译
			
			2、v-text 和 v-html 区别
				v-html 能够解析 html 片段
    </pre>

		<div id="box">
			<p v-text='name'></p>
			<p v-html='name'></p>
			<p v-pre>{{ name }}</p>

			<br>
			<p v-text='info'></p>
			<p v-html='info'></p>

		</div>

		<script src="/scripts/vue.js"></script>

		<script>
			var vm = new Vue({
				el: '#box',
				data: {
					name: 'zs',
					age: '20',
					sex: 'male',
					info:'<h1>我是程序员</h1>'
				},
			})
		</script>
		</script>
	</body>
</html>
